<template>
  <div class="van-hairline--bottom">

    <van-nav-bar
      :title="navbar.title.text"
      @click-left="navbar_func(navbar.left.fun, navbar.left)"
      @click-right="navbar_func(navbar.right.fun, navbar.right)"
      :fixed="navbar.fixed"
      border='true'
    >
      <template #left>
        <div v-if="navbar.left">
        <van-icon
          v-if="navbar.left.icon"
          :name="navbar.left.icon"
          :size="navbar.left.icon_size"
        />
        <span v-else v-text="navbar.left.text"></span>
        </div>
      </template>
      <template #right>
        <div v-if="navbar.right">
        <van-icon
          v-if="navbar.right.icon"
          :name="navbar.right.icon"
          :size="navbar.right.icon_size"
        />
        <span v-else v-text="navbar.right.text"></span>
        </div>
      </template>
    </van-nav-bar>
    <!-- 手动 等高的占位元素 -->
    <div style="margin-top:46px"></div>

  </div>
</template>

<script>
export default {
  // 页面名称
  name: 'navbar',
  // 本地变量
  data() {
    return {
      m: 1,
    };
  },
  // 接受参数
  props: {
    // 接参
    navbar: Array,
  },
  // 方法 重复传参可能有点麻烦，这里写个默认方法
  methods: {
    // 页面跳转事件
    Jump_page(href, way) {
      if (href) {
        if (way) {
          // url
          window.location.replace(href);
        } else {
          // route
          this.$router.push({ path: href });
        }
      }
    },
    // 绕到执行函数
    navbar_func(func, data) {
      if (func) {
        func();
      } else {
        console.log(data); // 则使用跳转函数
        // let href = data.href;
        // let way = data.way;
        this.Jump_page(data.href, data.way);
      }
    },
  },
  // 载入
  mounted() {

  },
};
</script>
<!--
      navbar: {
        fixed: true,
        title: {
          text: '首页',
        },
        left: {
          text: '左',
          fun: this.left,
          icon: null,
          icon_size: 18,
          href: null,
          way: false,
        },
        right: {
          text: '右',
          fun: this.right,
          icon: 'setting-o',
          icon_size: 18,
          href: null,
          way: false,
        },
      },
-->
